<!--
 /*
 * Copyright (C) 2011 Alexander Forselius
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Timemachine</title>
		<base href="app://bungalow/apps/timemachine/">
        <link rel="stylesheet" data-uri="http://127.0.0.1:9261/themes/style.css">
		<script src="http://127.0.0.1:9261/apps/api/views.js" type="text/JavaScript"></script>
        <script src="http://127.0.0.1:9261/apps/api/models.js" type="text/JavaScript"></script>
		<link rel="stylesheet" href="css/nouislider.css" />
		<link rel="stylesheet" href="css/style.css" />
		<script src="js/jquery-1.7.2.min.js" language="javascript"></script>
		<script src="js/jquery.nouislider.js" language="javascript"></script>
		<script type="text/javascript">
			function ldrag(e) {
				try {
					e.preventDefault();
					e.dataTransfer.dropEffect = 'none';
					e.returnValue = false;
				} catch (e) {
					console.log(e.stack);
				}
			}
			function slaw () {
				if(document.getElementById("info").style.display == "none") {
					document.getElementById("info").style.display = "block";
					localStorage.setItem("hideInfo", "false");
					document.getElementById("slaw").innerHTML = "Hide info";
				} else {
					document.getElementById("info").style.display = "none";
					localStorage.setItem("hideInfo", "true");
					document.getElementById("slaw").innerHTML = "Show info";
				}
			}
			
			function init() {
				try {
					if(localStorage.getItem("hideInfo") == "true") {
						document.getElementById("info").style.display = "none";
						document.getElementById("slaw").innerHTML = "Show info";
					} else {
						document.getElementById("info").style.display = "block";
						document.getElementById("slaw").innerHTML = "Hide info";
					}
				} catch (e) {
					document.getElementById("info").style.display = "block";
				}
				document.getElementById("query").addEventListener("dragover", ldrag, false);
			}
			
		</script>
	</head>
	<body  onload="sp = getSpotifyApi(1); script = sp.require('script'); script.init(); init();">
		<header>
			<center>	<img class="nodrag" src="img/logo.png" /> </center>
		</header>
		
		<div  class="section" id="section_overview">
			
			<nav >
				<span class="display" style="float: left" id="startyear">1950</span>
				<div id="slider" style="float:left; text-align:center">
					<!--<input class="range" style="width:320px" id="timeslider" min="1920" max="2012" type="range"  />-->
					<div id="timeslider">
					</div>
					<script>
						
					</script>
		

				</div>
				<span class="display" style="float: left" id="endyear">2012</span>
				<span style="float: right">
					<input class="input" type="find" data-template="Search for track/artist/album between ${start} - ${end}" placeholder="Search for track/artist/album between ${start} - ${end}" style="width:330px" id="query" list="powers"/>
				</span>	
			</nav>
			<!--<div id="fb-connect">
				<input type="checkbox" value="true" name="fb" id="fb" /><label>I understand that when I log into my TimeMachine with Facebook, TimeMachine will be able to associate information about my Spotify use, such as library, and listening history, with my Facebook account</label>
			</div>-->
			<div id="story" >
				<center id="info">Time Machine is an easy-to use
				shell for Spotify’s own year
				search functionality!
				Playlists are based on standard
				search queries. For example,
				<a id="example" href="spotify:search:2001-2002">spotify:search:2001-2002</a>.
				Tracks are chosen according to
				Spotify’s standard search results.
				You can also search within your
				search using the input field below
				the Time Machine header logo.
				</center>
				<center><a href="#" onclick="slaw()" id="slaw">Hide info</a></center>
			</div>
			<div id="flow">
			</div>
			
			<div id="find">
				
				
				<datalist id="powers">
					 <option value="1950">
					 <option value="2000">
					 <option value="2012">
				</datalist>

			</div>
		

		</div>
		
		<div id="connLost" style="display: none; z-index:555" class="fade">
			
			<div class="msg">You're offline. This app does not work in offline mode</div>
		</div>
		
		<footer class="cbox">
			<center>
				<table width="340">
					<tr>
						<td>
							<div id="miniplayer"></div></td><td><span id="miniplayer"></span><div >By <a href="spotify:user:drsounds">Alexander Forselius</a> Also an <a href="spotify:artist:2FOROU2Fdxew72QmueWSUy">artist on Spotify</a></div>
						</td>
					</tr>
				</table>
			</center>
		</footer>
		
	</body>
</html>